<?php
    /**
    *   $aPrame = array(
    *       'disabled' => 'true',
    *       'width' => '250px',
    *       'dropdownImage' => 'small',
    *       'header' => 'nha san xuat',
    *       'headerWidth' => '32px',
    *   );
    */
?>
<script type="text/javascript">
    $(document).ready(function(){
        // Load more sub category of category
        var sCurrentCategory = '';
        $('.category_block').on('click','li',function(){
            $(this).closest('.sub_category_item').find('li').removeClass('category_active');
            $(this).addClass('category_active');
            $(this).closest('.sub_category_item').nextAll('.sub_category_item').remove();
            // save list category
            var category = $(this).attr('val');
            var sCategories = '';
            $('.category_block .category_active').each(function(){
                sCategories = sCategories + $(this).attr('val') + ';';
            });
            sCategories = sCategories.substring(0,sCategories.length - 1);
            $('#list_categories').val(sCategories);
            sCurrentCategory = category;
            $('#category_uri').val(category);
            $('#category_name').val($(this).text());
            // ajax load child category of current click
            $.post('~block/loadSubCategories',{category: category}, function(data){
                $(data).insertBefore('.line_category');
                var height = $('.line_category').position().top;
                $('.category_block').css('height', (height + 20) + 'px');
            });
        });
        // Effect expand search or category
        $('.list_category_panel h1').click(function(){
            var height = $('.line_category').position().top;
            //$('.search_category_block').css('height','0px');
            $('.search_category_block').css('overflow', 'hidden');
            $('.search_category_block').animate({'height' : '0px'} , 500);
            $('.category_block').css('height', (height + 20) + 'px');
        });
        $('.block_search_category h1').click(function(){
            
            $('.search_category_block').css('overflow', 'hidden');
            $('.search_category_block').animate({'height' : '38px'} , 500 , function(){
                $('.search_category_block').css('overflow', 'visible');
            });
            $('.category_block').css('height','0px');
        });
        
        // Click vao onption
        $('.block_search_category .custom_combobox li').click(function(){
            $('#list_categories').val($(this).attr('pval'));
            $('#category_name').val($(this).text());
        });
    });
</script>
<div class="category_panel">
    <div>
        
    </div>

    <div class="block_search_category">
        <h1>Search Category by Name</h1>
        <div wid="" class="search_category_block">
            
            <?php
                $aParams = array(
                    'id' => 'category_uri',
                    'width' => ($template->get('width') ? $template->get('width') : '300px'),
                    'middle' => true,
                    'stringKey' => 'uri',
                    'stringTitle' => 'name',
                    'isCategory' => true,
                    'value' => ($template->get('category_uri') ?  $template->get('category_uri') : ''),
                    'title' => ($template->get('category_name') ?  $template->get('category_name') : ''),
                    'categories' => ($template->get('list_categories') ?  $template->get('list_categories') : ''),
                    'aValue' => ($template->get('aCategories') ? $template->get('aCategories') : array()),
                );
                if($template->get('header'))
                {
                    $aParams['header'] = $template->get('header');
                }
                if($template->get('headerWidth'))
                {
                    $aParams['headerWidth'] = $template->get('headerWidth');
                }
                if($template->get('width'))
                {
                    $aParams['width'] = $template->get('width');
                }
                includeBlock('block/customComboboxBlock',$aParams); 
            ?>
        </div>
    </div>
    
    <div class="list_category_panel">
        <h1>Or select Category from a List</h1>
        <div wid="" class="category_block">
            <div class="sub_category_item">
                <ul>
                    <?php
                        foreach($template->get('aParentCategories') as $aCategory)
                        {
                            echo '<li val="'.$aCategory['uri'].'">'.$aCategory['name'].'</li>';
                        }
                    ?>
                </ul>
            </div>
            <div class="line_category" style="clear: both;margin-bottom:10px;margin-right:20px;"></div>
        </div>
    </div>
</div>